<template>
  <div class="member-safe-page">
    <!-- 顶部标题 -->
    <div class="xtx-center-head">
      <h4 class="title">安全设置</h4>
    </div>
    <div class="xtx-safe-body">
      <div class="item">
        <div class="icon">
          <span class="iconfont icon-suo"></span>
        </div>
        <div class="text">
          <p>登录密码</p>
          <p>建议您定期更换密码，设置安全性高的密码可以使帐号更安全</p>
        </div>
        <a @click="$refs.passwordEdit.open()" class="btn" href="javascript:;">更换</a>
      </div>
      <div class="item">
        <div class="icon">
          <span class="iconfont icon-phone"></span>
        </div>
        <div class="text">
          <p>安全手机 180******49</p>
          <p>安全手机可以用于登录帐号，重置密码或其他安全验证</p>
        </div>
        <router-link class="btn" to="/member/safe/mobile">更换</router-link>
      </div>
      <div class="xtx-safe-warn">
        <p>安全服务提示</p>
        <p>确认您登录的是小兔鲜儿网址，注意防范进入钓鱼网站，不要轻信各种即时通讯工具发送的商品或支付链接，谨防网购 诈骗</p>
        <p>建议您安装杀毒软件，并定期更新操作系统等软件补丁，确保帐号及交易安全</p>
      </div>
    </div>
    <!-- 修改密码 -->
    <password-edit ref="passwordEdit"></password-edit>
  </div>
</template>

<script>
import PasswordEdit from './components/password-edit'
export default {
  name: 'member-safe-page',
  components: { PasswordEdit }
}
</script>

<style scoped lang='less'>
@import './styles/safe.less';
</style>
